<template>
  <div class="goodsInfo-container">
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
    >
      <div class="ball" v-show="flag"></div>
    </transition>
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <swipers :images="images" :isFull="false"></swipers>
        </div>
      </div>
    </div>
    <div class="mui-card">
      <div class="mui-card-header">{{ infos.title }}</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p class="mar-price">
            市场价 :
            <span style="text-decoration: line-through; font-size: 16px">{{
              infos.price
            }}</span>
            销售价 :
            <span style="color: red; font-weight: 700; font-size: 16px">{{
              infos.sale
            }}</span>
          </p>
          <p class="num">
            购买数量:<numBox
              :max="infos.stock"
              @func="getSelectedCount"
            ></numBox>
          </p>
          <mt-button type="primary">立即购买</mt-button>
          <mt-button type="danger" @click="addBall">加入购物车</mt-button>
        </div>
      </div>
    </div>
    <div class="mui-card">
      <div class="mui-card-header">商品参数</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>商品货号：{{ infos.number }}</p>
          <p>库存情况：{{ infos.stock }}件</p>
          <p>上架时间：{{ infos.time | dateFormat("YYYY-MM-DD HH-mm-ss") }}</p>
        </div>
      </div>
      <div class="mui-card-footer">
        <mt-button type="primary" size="large" plain class="btn" @click="goDesc"
          >图文介绍</mt-button
        >
        <mt-button
          type="danger"
          size="large"
          plain
          class="btn"
          @click="goComment"
          >商品评论</mt-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import swipers from "../sub-components/swipers.vue";

import phone1 from "../../images/phone1.png";
import phone2 from "../../images/phone2.png";
import phone3 from "../../images/phone3.png";

import numBox from "../goods/goodsNumBox.vue";

import { mapState, mapMutations } from "vuex";

export default {
  data() {
    return {
      images: [phone1, phone2, phone3],
      infos: {
        id: 21,
        title: "小米(MI)小米Note，16G 双网通版",
        price: "¥2699",
        sale: "¥2199",
        number: "fjdhdu-48944r3",
        stock: "60",
        time: new Date(),
      },
      flag: false, // 小球的显示与隐藏状态
      selectedCount: 1, // 用户选择的商品购买数量，默认为1
    };
  },
  props: ["id"],
  methods: {
    ...mapMutations(["addToCart"]),
    goDesc() {
      this.$router.push("/home/goodsDesc");
    },
    goComment() {
      this.$router.push("/home/goodscomment");
    },
    addBall() {
      this.flag = !this.flag;
      // 调用 mutations 中的方法
      this.addToCart({
        id: this.id,
        count: this.selectedCount,
        selected: true,
        price: this.infos.sale,
      });
    },
    beforeEnter(el) {
      el.style.transform = "translate(0,0)";
    },
    enter(el, done) {
      el.offsetWidth;

      // 动态获取小球的横纵坐标
      var ballPos = el.getBoundingClientRect();

      // 动态获取徽标的横纵坐标
      // 这里获取徽标的位置和 双向数据绑定没有关系，所以可以直接使用普通的DOM操作
      // DOM操作的优势：不论要操作的元素属于哪个组件，只要这个元素属于document，就可以直接获取到
      var badgePos = document
        .querySelector(".van-badge")
        .getBoundingClientRect();

      var left = badgePos.left - ballPos.left;
      var top = badgePos.top - ballPos.top;

      el.style.transform = "translate(" + left + "px, " + top + "px)";
      el.style.transition = "all .2s cubic-bezier(.46,-0.4,1,.49)";
      done();
    },
    afterEnter(el) {
      this.flag = !this.flag;
    },
    getSelectedCount(c) {
      // 把用户选择的最新数量值保存到 data中，方便用户点击 加入购物车 按钮时，把数量值同步到徽标中
      this.selectedCount = c;
    },
  },
  components: {
    swipers: swipers,
    numBox: numBox,
  },
  watch: {
    max: function (newValue, oldValue) {
      mui(".mui-numbox").numbox().setOption("max", newValue);
    },
  },
};
</script>

<style scoped>
.goodsInfo-container {
  background-color: #eee;
  overflow: hidden;
}
.mui-card-footer {
  display: flex;
  flex-direction: column;
}
.btn + .btn {
  margin-top: 15px;
}
.num {
  display: flex;
}
.mar-price {
  margin-bottom: 15px;
}
.ball {
  position: absolute;
  left: 147px;
  top: 415px;
  width: 15px;
  height: 15px;
  background-color: red;
  border-radius: 50%;
  z-index: 99;
}
</style>